<template>
  <div class="common_wrap">
    <div class="common_title">通知配置</div>
    <div class="btn-container" style="margin-left: 20px">
      期号：<el-select v-model="issue" placeholder="请选择">
        <el-option
          v-for="item in dateList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-table ref="table" v-loading="tableLoading" :data="tableData">
      <el-table-column
        prop="ruleName"
        label="触发规则"
        show-overflow-tooltip
        align="left"
      >
      </el-table-column>
      <el-table-column
        prop="reciverTypeName"
        label="接收人"
        show-overflow-tooltip
        align="left"
      >
      </el-table-column>
      <el-table-column
        prop="notifyMsg"
        label="消息内容"
        show-overflow-tooltip
        align="left"
      >
      </el-table-column>
      <el-table-column
        prop="issue"
        label="期号"
        show-overflow-tooltip
        align="left"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-tooltip content="编辑" placement="top">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit(scope.row, scope.$index)"
            />
          </el-tooltip>
          <!-- 发送 -->
          <el-tooltip content="发送" placement="top">
            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              circle
              @click="send(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      class="pagination-container"
      :background="true"
      :current-page="queryParams.current"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    /> -->
    <el-dialog title="消息修改" :visible.sync="dialogVisible" width="50%">
      <el-form
        ref="form"
        :model="checkedData"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="触发规则">
          {{ checkedData.ruleName }}
        </el-form-item>
        <el-form-item
          label="接收人"
          v-if="checkedData.reciverTypeName === '责任领导'"
        >
          {{ checkedData.reciverTypeName }}
        </el-form-item>
        <el-form-item
          label="接收人"
          prop="personList"
          v-if="checkedData.reciverTypeName === '指定人员'"
        >
          <el-select
            v-model="checkedData.personList"
            placeholder="请选择接收人"
            filterable
            multiple
            style="width: 100%"
          >
            <el-option
              v-for="item in personAllList"
              :key="item.empId"
              :label="item.positionName + ' ' + item.name"
              :value="item.empId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容" prop="notifyMsg">
          <el-input
            type="textarea"
            v-model="checkedData.notifyMsg"
            maxlength="512"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "NoticeSetting",
  data() {
    return {
      issue: "",
      dateList: [],
      dialogVisible: false,
      personList: [],
      personAllList: [],
      // 搜索条件
      queryParams: {
        current: 1, // 第几页
        size: 10, // 每页条数
      },
      checkedIndex: 0,
      checkedData: {
        ruleName: "",
        ruleType: "",
        reciverTypeName: "",
        personType: "",
        notifyMsg: "",
        issue: "",
        personList: [],
      },
      total: 0, // 总条数
      tableLoading: false,
      tableData: [],
      rules: {
        notifyMsg: [
          { required: true, message: "请输入消息内容", trigger: "blur" },
        ],
        personList: [
          { required: true, message: "请选择接收人", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getDateList();
    this.getPersonList();
  },
  watch: {
    issue() {
      for (const item of this.tableData) {
        item.issue = this.issue;
      }
      this.tableData = JSON.parse(JSON.stringify(this.tableData));
    },
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$api
            .warnSave({
              id: this.checkedData.id,
              recivers: this.checkedData.personList.join(","),
              notifyMsg: this.checkedData.notifyMsg,
            })
            .then((res) => {
              if (res.data.errno === "200") {
                this.$message.success("保存成功");
                this.dialogVisible = false;
                this.getTableData();
              }
            });
        }
      });
    },
    // 期号
    getDateList() {
      const params = {
        _gp: "issue",
        _mt: "list",
      };
      this.$api.commonApi(params).then((res) => {
        if (res.data.errno === 200) {
          this.dateList = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
          this.getTableData();
        } else {
          this.dateList = [];
        }
      });
    },
    // 人员
    getPersonList() {
      this.$api.personList().then((res) => {
        if (res.status === 200) {
          this.personAllList = res.data.data[0].chidDept
            .map((v) => v.empList)
            .flat();
          console.log(this.personAllList, "personAllList");
        } else {
          this.personAllList = [];
        }
      });
    },
    // 编辑
    edit(row, index) {
      this.dialogVisible = true;
      this.checkedData = { ...row };
      this.checkedIndex = index;
    },
    // 发送
    send(row) {
      if (row.reciverTypeName === "指定人员" && row.personList.length === 0) {
        return this.$message.error("请在编辑里选择发送人员");
      }
      if (!row.issue) {
        return this.$message.error("请选择期号");
      }
      // 一次红牌
      if (row.ruleId === 1001) {
        this.$api
          .once({
            issueNo: this.issue,
            content: row.notifyMsg,
            signage: 1,
          })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
      // 两次红牌
      if (row.ruleId === 1002) {
        this.$api
          .twiceRed({ issueNo: this.issue, content: row.notifyMsg })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
      // 三次红牌领导
      if (row.ruleId === 1003) {
        this.$api
          .threeRed({ issueNo: this.issue, content: row.notifyMsg, empIds: "" })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
      // 三次红牌指定
      if (row.ruleId === 1004) {
        this.$api
          .threeRed({
            issueNo: this.issue,
            content: row.notifyMsg,
            empIds: row.recivers,
          })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
      // 一次绿牌
      if (row.ruleId === 1005) {
        this.$api
          .once({
            issueNo: this.issue,
            content: row.notifyMsg,
            signage: 0,
          })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
      // 名次变动
      if (row.ruleId === 1006) {
        this.$api
          .changePosition({
            issueNo: this.issue,
            content: row.notifyMsg,
          })
          .then((res) => {
            if (res.data.errno === "200") {
              this.$message.success("发送成功");
            }
          });
      }
    },
    getTableData() {
      this.tableLoading = true;
      this.tableLoading = false;
      this.$api.warnList().then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.issue = this.dateList[0].value;
          for (const item of this.tableData) {
            if (item.recivers)
              item.personList = item.recivers.split(",").map((v) => v - 0);
            else item.personList = [];
          }
        } else {
          this.tableData = [];
        }
      });
      // const params = {
      //   page: this.queryParams.current,
      //   limit: this.queryParams.size,
      // };
      // this.$api.noticeList(params).then((res) => {
      //   if (res.status === 200) {
      //     // this.tableData = res.data.items;
      //     // this.total = res.data.total;
      //   } else {
      //     this.tableData = [];
      //     // this.total = 0;
      //   }
      // });
    },
    // 每页显示数量变化
    sizeChange(size) {
      this.queryParams.size = size;
      this.queryParams.current = 1;
      this.getTableData();
    },

    // 当前页变化
    currentChange(current) {
      this.queryParams.current = current;
      this.getTableData();
    },
    formatList(list) {
      return list.map((v) => v.empName).join("，");
    },
  },
};
</script>

<style scoped>
</style>